<template>
  <div id="chart"></div>
</template>

<script>
import {Graph, Shape } from '@antv/x6'
import {GridLayout} from '@antv/layout'

// 网格布局
const {Circle} = Shape;

Circle.config({
  width: 60, height: 60,
  attrs: {
    body: {
      fill: 'pink',
      stroke: 'blue'
    },
    label: {
      fill: 'white'
    }
  }
})

const data = {
  nodes: [
    {
      id: 'label1',
      label: 'label10',
      shape: 'circle'
    },
    {
      id: 'label2',
      label: 'label2',
      shape: 'circle'
    },
    {
      id: 'label3',
      label: 'label3',
      shape: 'circle'
    },
    {
      id: 'label4',
      label: 'label4',
      shape: 'circle'
    },
    {
      id: 'label5',
      label: 'label5',
      shape: 'circle'
    },
    {
      id: 'label6',
      label: 'label6',
      shape: 'circle'
    },
  ],
  edges: [
    {
      source: 'label1',
      target: 'label6',
      attrs: {
        line: {
          stroke: 'pink', // 线的颜色
        }
      }
    },
    {
      source: 'label2',
      target: 'label5',
      attrs: {
        line: {
          stroke: '#00a8ff',
          sourceMarker: {
            tagName: 'path',
            d: 'M 20 -10 0 0 20 10 Z',
          },
          targetMarker: {
            tagName: 'path',
            d: 'M 20 -10 0 0 20 10 Z',
            fill: 'red', // 自定义箭头的填充色
            stroke: 'blue', // 自定义边框的颜色
          }
        }
      }
    }
  ]
}

export default {
  name: 'gridLayout',
  methods: {
    createGraph() {
      const graph = new Graph({
        container: document.getElementById('chart'),
        width: window.innerWidth,
        height: window.innerHeight,
        grid: {
          visible: true,
          size: 20
        },
        background: {
          color: '#fffbe6'
        }
      });
      const layout = new GridLayout({
        width: 738,
        height: 360,
        sortBy: 'label', // 排序
        rows: 3,
        cols: 4,
      })
      const model = layout.layout(data);
      graph.fromJSON(model);
    }
  },
  mounted() {
    this.createGraph()
  }
}
</script>

<style>

</style>